<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>webgl基础</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        // 获取canvas元素
        var canvas = document.getElementById("canvas");
        // canvas宽高
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        // webgl绘图上下文
        var gl = canvas.getContext("webgl");
        // 第一次创建webgl绘图上下文要设置视口大小
        gl.viewport(0, 0, canvas.width, canvas.height);

        //顶点着色器源码
        var vertexShaderSource = '' +
            'attribute vec4 a_Position;' +
            'uniform mat4 u_Mat;' +
            'varying vec4 v_Color;' +
            'void main(){' +
            //给内置变量gl_PointSize赋值像素大小
            // '   gl_PointSize=20.0;' +
            //顶点位置，位于坐标原点
            '   gl_Position = u_Mat * a_Position;' +
            '   v_Color = gl_Position;' +
            '}';

        //片元着色器源码
        var fragShaderSource = '' +
            'precision mediump float;' +
            'varying vec4 v_Color;' +
            'void main(){' +
            //定义片元颜色
            '   gl_FragColor = v_Color;' +
            '}';

        console.log(gl)
        // 创建顶点着色器
        var vertexShader = gl.createShader(gl.VERTEX_SHADER);
        // 创建顶点着色器源码，需要编写glsl代码
        gl.shaderSource(vertexShader, vertexShaderSource);
        // 编译顶点着色器
        gl.compileShader(vertexShader);

        // 创建片元着色器
        var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        // 创建片元着色器源码，需要编写glsl代码
        gl.shaderSource(fragmentShader, fragShaderSource);
        // 编译片元着色器
        gl.compileShader(fragmentShader);


        //创建程序对象program
        var program = gl.createProgram();
        //附着顶点着色器和片元着色器到program
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        //链接program
        gl.linkProgram(program);
        //使用program
        gl.useProgram(program);

        //类型数组构造函数Float32Array创建顶点数组
        // var data = new Float32Array([0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5]);//正方形顶点
        var data = new Float32Array([
            0.0, 0.5,
            -0.5, -0.5,
            0.5, -0.5
        ]);


        //创建缓冲区对象
        var buffer = gl.createBuffer();
        //绑定缓冲区对象,激活buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
        //顶点数组data数据传入缓冲区
        gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);

        //获取顶点着色器的位置变量apos，即aposLocation指向apos变量。
        var aposLocation = gl.getAttribLocation(program, 'a_Position');

        //缓冲区中的数据按照一定的规律传递给位置变量apos
        gl.vertexAttribPointer(aposLocation, 2, gl.FLOAT, false, 0, 0);
        //允许数据传递
        gl.enableVertexAttribArray(aposLocation);

        const scale = {
            x: 1.5,
            y: 1.5,
            z: 1.5
        }
        // const mat = new Float32Array([
        //     scale.x, 0.0, 0.0, 0.0, 0.0,
        //     scale.y, 0.0, 0.0, 0.0, 0.0,
        //     scale.z, 0.0, 0.0, 0.0, 0.0,
        //     1.0
        // ]);

        // const u_Mat = gl.getUniformLocation(program, 'u_Mat');
        // gl.uniformMatrix4fv(u_Mat, false, mat);


        // // 清除canvas
        // gl.clearColor(0.0, 0.0, 0.0, 0.0);
        // gl.clear(gl.COLOR_BUFFER_BIT);

        // //开始绘制图形
        // // gl.drawArrays(gl.LINE_LOOP, 0, 4);//正方形边框
        // gl.drawArrays(gl.TRIANGLES, 0, 3);//三角形

        function animate() {
            scale.x -= 0.001;
            scale.y -= 0.001;
            scale.z -= 0.001;
            const mat = new Float32Array([
                scale.x, 0.0, 0.0, 0.0, 0.0,
                scale.y, 0.0, 0.0, 0.0, 0.0,
                scale.z, 0.0, 0.0, 0.0, 0.0,
                1.0
            ]);

            const u_Mat = gl.getUniformLocation(program, 'u_Mat');
            gl.uniformMatrix4fv(u_Mat, false, mat);

            //开始绘制图形
            // gl.drawArrays(gl.LINE_LOOP, 0, 4);//正方形边框
            gl.drawArrays(gl.TRIANGLES, 0, 3);//三角形
            requestAnimationFrame(animate)
        }
        animate();
    </script>
</body>

</html>